<!-- 银行管理 -->
<template>
  <div class="bank-account">
    <div ref="dgtools" class="filter-container">
      <div class="dgts-fm">
        <el-input
          style="width: 300px"
          placeholder="银行名称/账户名称/卡号"
          v-model="dg.ps.find"
          clearable
        ></el-input>
        <el-button type="primary" icon="el-icon-search" @click="getDgList"
          >搜索</el-button
        >
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd"
          >新增</el-button
        >
        <el-button type="primary" icon="el-icon-edit" @click="handleUpdate"
          >修改</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-delete"
          @click="handleDelete"
          >删除</el-button
        >
      </div>

      <TableSelfSet
        v-if="dg.columns.length > 0"
        :tbTitle="'银行列表'"
        :dgName="dg.dgName"
        :tbId="dg.tbName"
        :srcCols="dg.srcCols"
        :columns="dg.columns"
        @saveSet="saveTbSet"
      />
    </div>

    <el-table
      :ref="dg.tbName"
      :data="dg.list"
      row-key="id"
      :height="bodyHeight"
      border
      fit
      :row-class-name="rowClassName"
      @header-dragend="dragHeader"
      @selection-change="selRowChange"
      @select="selRow"
    >
      <el-table-column
        fixed="left"
        type="selection"
        width="40"
      ></el-table-column>
      <fragment v-for="col in dg.columns" :key="col.field">
        <el-table-column
          :class-name="dg.dgName"
          :prop="col.field"
          :label="col.label"
          :width="col.width"
        ></el-table-column>
      </fragment>
    </el-table>
    <Pagination
      v-show="dg.total > 0"
      :total="dg.total"
      :page.sync="dg.ps.page"
      :limit.sync="dg.ps.rows"
      @pagination="getDgList"
    />

    <AddBank
      v-if="md.add.state"
      :state="md.add.state"
      :datas="currentData"
      @getMdState="getAddMdState"
      @reloadDg="getDgList"
    />
  </div>
</template>

<script>
import DataGridBase from "@/views/mixins/DataGridBase";
import DataGridResize from "@/views/mixins/DataGridResize";
import elDragDialog from "@/directive/el-drag-dialog";
import TableSelfSet from "@/components/TableSelfSet";
import Pagination from "@/components/Pagination";
import { getBankList, deleteBack } from "@/api/services/order.service";
import AddBank from "./add-bank";

export default {
  name: "BankList",
  mixins: [DataGridBase, DataGridResize],
  directives: { elDragDialog },
  components: { TableSelfSet, Pagination, AddBank },
  data() {
    let cols = [
      { label: "账户名称", field: "bankName", width: 130 },
      { label: "开户行", field: "cardName", width: 110 },
      { label: "卡号/微信/支付宝手机号", field: "cardNo", width: "auto" },
      { label: "公司类型", field: "isDefault", width: 80 },
      { label: "业务员", field: "serviceManName", width: 180 },
      { label: "设置时间", field: "addTime", width: 180 },
      { label: "操作备注", field: "operNote", width: "auto" },
    ];

    return {
      dg: {
        // 数据列表参数
        dgName: "dg",
        tbName: "bankListTb",
        total: 0,
        list: [],
        srcCols: cols,
        columns: [],
        selRows: [],
        ps: {
          // 过滤参数
          page: 1,
          rows: 20,
          find: "",
        },
      },
      md: {
        add: { state: false },
      },
      currentData: null,
    };
  },
  created() {
    const that = this;

    that.initTbSetData(that.dg.dgName);

    that.getDgList();
  },
  methods: {
    checkRows() {
      const rows = this.dg.selRows;
      let isCheck = false;
      if (rows.length === 1) {
        isCheck = true;
      }
      return { rows: rows[0], isCheck };
    },
    formatterDefault(row) {
      return row.isDefault ? "系统默认" : "默认";
    },
    handleAdd() {
      this.md.add.state = true;
      this.currentData = null;
    },
    handleUpdate() {
      const { rows, isCheck } = this.checkRows();
      if (!isCheck) {
        return this.U.qerror("请选择一个账户信息");
      }
      this.currentData = rows;
      this.md.add.state = true;
    },
    handleDelete() {
      const that = this, U = that.U, rows = that.dg.selRows;

      if (!rows.length){
        U.qerror("请勾选要删除的账号信息");
        return;
      }else{
        U.qconfim(`确认删除所选账户吗？`).then(r => {
          if(r){
            let ids = rows.map((item) => item.id);
            deleteBack({ delIds: ids.join(",") }).then(res => {
              if(res.code !== 1){
                U.qerror(res.msg);
              }else{
                U.qsuccess(res.msg);

                // 刷新列表
                this.getDgList();
              }
            });
          }
        });
      }
    },
    getAddMdState(e) {
      let eleRef = this.dg.tbName;
      this.$refs[eleRef].clearSelection();
      this.md.add.state = e;
      this.dg.selRows = []
    },
    getDgList() {
      let loading = this.U.qloading("数据请求中...");
      getBankList(this.dg.ps)
        .then((res) => {
          if (res.code === 1) {
            let list = res.data;

            list.forEach((it) => {
              it.dgName = this.dg.dgName;
            });
            this.dg.list = list;

            this.dg.total = res.count;
            this.U.qclose(loading);
          }
        })
        .catch(() => {
          this.U.qclose(loading);
        });
    },
    rowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    selRow(selection, row) {
      this.dg.selRows = selection;
    },
  },
};
</script>

<style lang="less" scoped>
.bank-account {
  .upload-exl {
    margin: 0 10px;
  }
}
</style>